<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片列表：鼠标移入/移出改变图片透明度</title>
    <style>
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        #imgList {
            width: 700px;
            overflow: hidden;
            zoom: 1;
            border: 1px solid #333;
            margin: 0 auto;
            padding: 0 0 10px 10px;
        }

        #imgList li {
            float: left;
            width: 128px;
            height: 128px;
            border: 1px solid #ccc;
            margin: 10px 10px 0 0;
        }

        #imgList li img {
            float: left;
            opacity: 0.3;
            cursor: crosshair;
            filter: alpha(opacity=30);
        }

        #imgList li.current img {
            opacity: 1;
            filter: alpha(opacity=100);
        }
    </style>

</head>

<body>
    <ul id="imgList">
        <li class=""><img src="http://www.fgm.cc/learn/lesson2/img/1.jpg" /></li>
        <li><img src="http://www.fgm.cc/learn/lesson2/img/2.jpg" /></li>
        <li><img src="http://www.fgm.cc/learn/lesson2/img/3.jpg" /></li>
        <li><img src="http://www.fgm.cc/learn/lesson2/img/4.jpg" /></li>
        <li><img src="http://www.fgm.cc/learn/lesson2/img/5.jpg" /></li>
        <li><img src="http://www.fgm.cc/learn/lesson2/img/6.jpg" /></li>
        <li><img src="http://www.fgm.cc/learn/lesson2/img/7.jpg" /></li>
        <li><img src="http://www.fgm.cc/learn/lesson2/img/8.jpg" /></li>
        <li><img src="http://www.fgm.cc/learn/lesson2/img/9.jpg" /></li>
        <li><img src="http://www.fgm.cc/learn/lesson2/img/10.jpg" /></li>
    </ul>
    <script>
        const imgList = document.getElementById('imgList')
        const lis = imgList.children // htmlCollection
        for(let li of lis){
            li.addEventListener('mouseenter',function(){
                li.classList.add('current')
            })

            li.addEventListener('mouseleave',function(){
                li.classList.remove('current')
            })
        }
    </script>
</body>

</html>